<template>
    <div class="main-container">
        <div style="display: flex; grid-gap: 10px">
            <div style="width: 150px;" class="card">
                <div v-for="(item, index) in tagList" :key="index" class="category-item"
                    :class="{ 'category-item-active': current === item.name }" @click="selectCategory(item.name)">
                    {{ item.name }}
                </div>
            </div>
            <div style="flex: 1" class="card">
                <div style="display: flex;">
                    <div style="flex:1">
                        <div style="font-size: 10px; font-weight: bold;">适合小公司的自动化部署脚本</div>
                        <div>简介</div>
                        <div style="display: flex;">
                           <span><i class="el-icon-user"></i>用户名</span>
                           <span><i class="el-icon-view"></i>查看数</span>
                           <span><i class="el-icon-like"></i>点赞数</span>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 240px" class="card"></div>

        </div>

    </div>

</template>

<script>

export default {
    name: "blog",
    data() {
        return {
            current: '全部',  // 当前分类
            tagList: []
        }
    },
    mounted() {
        this.laod()
    },
    methods: {
        laod() {
            this.tagList = [{ name: '前端' }, { name: '后端' }, { name: '数据库' }, { name: '算法' }, { name: '其他' }]
            this.tagList.unshift({ name: '全部' })
        },
        selectCategory(categoryName) {
            this.current = categoryName
        }
    },
}
</script>

<style scoped>
.card {
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

.category-item {
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}

.category-item-active {
    background-color: #00A0DC;
    color: #fff;
}
</style>